<template>
  <div>
    <el-form inline :model="form">
      <el-form-item label="监测体名称">
        <el-select
          v-model="form.monitorId"
          size="medium"
          clearable
          placeholder="选择监测体名称"
        >
          <el-option
            v-for="(item, index) in monitorList"
            :key="index"
            :label="item.value"
            :value="Number(item.key)"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="采集设备名称">
        <el-select
          v-model="form.sensorId"
          size="medium"
          clearable
          placeholder="请选择传感器名称"
        >
          <el-option
            v-for="(item, index) in sensorList"
            :key="index"
            :label="item.sensorName"
            :value="Number(item.id)"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="info" size="medium" @click="search(1)">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" size="medium" @click="set()">设置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe>
      <el-table-column
        label="采集设备名称"
        prop="sensorName"
        align="center"
      ></el-table-column>
      <el-table-column
        label="采集设备标识"
        prop="sensorNumber"
        align="center"
        width="250"
      ></el-table-column>
      <el-table-column
        label="监测体名称"
        prop="monitorName"
        align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        label="一级"
        prop="pdata"
        align="center"
      ></el-table-column>
      <el-table-column
        label="二级"
        prop="xdata"
        align="center"
      ></el-table-column>
      <el-table-column
        label="三级"
        prop="ydata"
        align="center"
      ></el-table-column>
      <el-table-column
        label="四级"
        prop="hdata"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumnArr"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <el-link type="primary" :underline="false" @click="modify(scope.row)"
            >修改</el-link
          >&nbsp; -->
          <el-link type="primary" :underline="false" @click="del(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-col :span="10">
        <el-pagination
          background
          :current-page="pageData.currentPage"
          layout="total, prev, pager, next, jumper"
          :total="pageData.count"
          :page-size="pageData.pageSize"
          @current-change="handleCurrentChange"
          v-if="pageData.count && pageData.count != 0"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="增加阈值" :visible.sync="addThreshold" width="20%">
      <el-form
        :model="addForm"
        ref="addForm"
        :rules="formRules"
        size="medium"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="采集设备名称">
          <el-select
            v-model="addForm.sensorObj"
            size="medium"
            clearable
            placeholder="请选择传感器名称"
            @change="sensorChange($event)"
            style="display: flex"
          >
            <el-option
              v-for="item in sensorList"
              :key="item.id"
              :label="item.sensorName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集设备标识" v-show="addForm.sensorObj != ''">
          <el-input disabled v-model="sensorObj.sensorNum"></el-input>
        </el-form-item>
        <el-form-item label="监测体名称" v-show="addForm.sensorObj != ''">
          <el-input disabled v-model="sensorObj.monitorName"></el-input>
        </el-form-item>
        <el-form-item label="一级" prop="pData">
          <el-input v-model="addForm.pData" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="二级" prop="xData">
          <el-input v-model="addForm.xData" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="三级" prop="yData">
          <el-input v-model="addForm.yData" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="四级" prop="hData">
          <el-input v-model="addForm.hData" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="时间范围" v-show="statisticType == '01'">
          <el-select
            placeholder="请输入时间范围"
            v-model="addForm.timeType"
            style="display: flex"
          >
            <el-option label="1小时" value="01"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addThreshold = false">取 消</el-button>
        <el-button type="primary" @click="handle">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改阈值配置" :visible.sync="modifyThreshold" width="20%">
      <el-form
        :model="modifyForm"
        ref="modifyForm"
        :rules="formRules"
        size="medium"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="采集设备名称">
          <el-select
            v-model="modifyForm.sensorName"
            size="medium"
            clearable
            placeholder="请选择传感器名称"
            disabled
          >
            <el-option
              v-for="item in sensorList"
              :key="item.id"
              :label="item.sensorName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集设备标识">
          <el-input disabled v-model="modifyForm.sensorNumber"></el-input>
        </el-form-item>
        <el-form-item label="监测体名称">
          <el-input disabled v-model="modifyForm.monitorName"></el-input>
        </el-form-item>
        <el-form-item label="一级" prop="pdata">
          <el-input v-model="modifyForm.pdata" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="二级" prop="xdata">
          <el-input v-model="modifyForm.xdata" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="三级" prop="ydata">
          <el-input v-model="modifyForm.ydata" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="四级" prop="hdata">
          <el-input v-model="modifyForm.hdata" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="时间范围" v-show="statisticType == '01'">
          <el-select
            placeholder="请输入时间范围"
            v-model="modifyForm.timeType"
            style="display: flex"
          >
            <el-option label="1小时" value="01"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyThreshold = false">取 消</el-button>
        <el-button type="primary" @click="handle2">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "SatelliteService",
  data() {
    return {
      sensorList: null,
      monitorList: null,
      form: {
        sensorId: "",
        monitorId: "",
      },
      tableData: null,
      tableColumnArr: null,
      pageData: {
        currentPage: null,
        count: null,
        pageSize: null,
      },
      addThreshold: false,
      addForm: {
        sensorObj: "",
        pData: "",
        xData: "",
        yData: "",
        hData: "",
        timeType: "",
      },
      sensorObj: {
        sensorNum: "",
        monitorName: "",
      },
      modifyThreshold: false,
      modifyForm: {
        sensorName: "",
        sensorNumber: "",
        monitorName: "",
        pdata: "",
        xdata: "",
        ydata: "",
        hdata: "",
        timeType: "",
      },
      statisticType: "00",
      formRules: {
        pData: [
          {
            pattern: /^(\-|\+)?\d+(\.\d+)?$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        xData: [
          {
            pattern: /^(\-|\+)?\d+(\.\d+)?$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        yData: [
          {
            pattern: /^(\-|\+)?\d+(\.\d+)?$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        hData: [
          {
            pattern: /^(\-|\+)?\d+(\.\d+)?$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        pdata: [
          {
            pattern: /^(\-|\+)?\d+(\.\d+)?$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        xdata: [
          {
            pattern: /^(\-|\+)?\d+(\.\d+)?$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        ydata: [
          {
            pattern: /^(\-|\+)?\d+(\.\d+)?$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
        hdata: [
          {
            pattern: /^(\-|\+)?\d+(\.\d+)?$/,
            message: "请输入正确的值！",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    queryWarningList(queryData) {
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"page\\":{\\"currentPage\\":${queryData.currentPage},\\"pageSize\\":10},\\"moduleEnum\\":\\"00\\",\\"sensorId\\":\\"${queryData.sensorId}\\",\\"statisticType\\":\\"${queryData.statisticType}\\",\\"monitorId\\":\\"${queryData.monitorId}\\"}","serviceCode":"listWarningValueSetByPage","timestamp":"","uuid":""}`,
      }).then((res) => {
        if (res.data.parameter.list != "") {
          this.pageData = res.data.parameter.page;
          let list = res.data.parameter.list;
          this.tableData = list;
          // this.$message({
          //   message: "查询成功",
          //   type: "success",
          //   duration: 1000,
          //   offset: 450,
          // });
        }
        if (res.data.parameter.list == "") {
          this.pageData = 0;
          let list = res.data.parameter.list;
          this.tableData = list;
          this.$message({
            message: "暂无数据",
            duration: 1000,
            offset: 450,
          });
        }
      });
    },

    search(currentPage) {
      let queryData = {
        currentPage: currentPage,
        sensorId: this.form.sensorId,
        monitorId: this.form.monitorId,
        statisticType: this.statisticType,
      };
      this.queryWarningList(queryData);
    },
    handleCurrentChange(val) {
      this.search(val);
    },
    sensorChange(id) {
      let sensorName = {};
      sensorName = this.sensorList.find((item) => {
        //这里的chargingWorkNameList就是上面遍历的数据源
        return item.id === id;
        //筛选出匹配数据，是对应数据的整个对象
      });
      console.log(sensorName);
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorName\\":\\"${sensorName.sensorName}\\"}","serviceCode":"findSensorById","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.sensorObj = res.data.parameter;
      });
    },
    set() {
      this.addThreshold = true;
      this.addForm = {
        sensorObj: "",
        pData: "",
        xData: "",
        yData: "",
        hData: "",
        timeType: "",
      };
    },
    handle() {
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          this.addThreshold = false;
          let queryData = {
            sensorNumber: this.sensorObj.sensorNum,
            monitorName: this.sensorObj.monitorName,
            pdata: this.addForm.pData,
            xdata: this.addForm.xData,
            ydata: this.addForm.yData,
            hdata: this.addForm.hData,
            sensorId: this.addForm.sensorObj,
            timeType: this.addForm.timeType,
          };
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"moduleEnum\\":\\"00\\",\\"statisticType\\":\\"${this.statisticType}\\",\\"sensorId\\":\\"${queryData.sensorId}\\",\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"monitorName\\":\\"${queryData.monitorName}\\",\\"dataType\\":\\"\\",\\"pdata\\":\\"${queryData.pdata}\\",\\"xdata\\":\\"${queryData.xdata}\\",\\"ydata\\":\\"${queryData.ydata}\\",\\"hdata\\":\\"${queryData.hdata}\\",\\"timeType\\":\\"${queryData.timeType}\\"}","serviceCode":"addWarningValueSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let resultcode = res.data.resultcode;
            let message = res.data.parameter.message;
            if (resultcode == "0000") {
              this.$message({
                message: message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: "1",
                    sensorId: "",
                    monitorId: "",
                    statisticType: this.statisticType,
                  };
                  this.queryWarningList(queryData);
                },
              });
            } else if (resultcode == "0001") {
              this.$message({
                message: message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    modify(row) {
      this.modifyThreshold = true;
      this.modifyForm = Object.assign({}, row);
    },
    handle2() {
      this.$refs["modifyForm"].validate((valid) => {
        if (valid) {
          this.modifyThreshold = false;
          let queryData = {
            id: this.modifyForm.id,
            sensorId: this.modifyForm.sensorName,
            sensorNumber: this.modifyForm.sensorNumber,
            monitorName: this.modifyForm.monitorName,
            pdata: this.modifyForm.pdata,
            xdata: this.modifyForm.xdata,
            ydata: this.modifyForm.ydata,
            hdata: this.modifyForm.hdata,
            timeType: this.modifyForm.timeType,
          };
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"id\\":\\"${queryData.id}\\",\\"sensorId\\":\\"${queryData.sensorId}\\",\\"sensorNumber\\":\\"${queryData.sensorNumber}\\",\\"monitorName\\":\\"${queryData.monitorName}\\",\\"dataType\\":\\"\\",\\"pdata\\":\\"${queryData.pdata}\\",\\"xdata\\":\\"${queryData.xdata}\\",\\"ydata\\":\\"${queryData.ydata}\\",\\"hdata\\":\\"${queryData.hdata}\\",\\"timeType\\":\\"${queryData.timeType}\\"}","serviceCode":"updateWarningValueSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let resultcode = res.data.resultcode;
            let message = res.data.parameter.message;
            if (resultcode == "0000") {
              this.$message({
                message: message,
                type: "success",
                duration: 1000,
                onClose: () => {
                  let queryData = {
                    currentPage: "1",
                    sensorId: "",
                    monitorId: "",
                    statisticType: this.statisticType,
                  };
                  this.queryWarningList(queryData);
                },
              });
            } else if (resultcode == "0001") {
              this.$message({
                message: message,
                type: "warning",
              });
            }
          });
        }
      });
    },
    del(row) {
      this.$confirm("您确定要删除该条数据吗？", "删除阈值配置", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"warningvalueId\\":\\"${row.id}\\"}","serviceCode":"deleteWarningValueSet","timestamp":"","uuid":""}`,
          }).then((res) => {
            let message = res.data.parameter.message;
            this.$message({
              type: "success",
              message: message,
              duration: 1000,
              onClose: () => {
                let queryData = {
                  currentPage: "1",
                  sensorId: "",
                  monitorId: "",
                  statisticType: this.statisticType,
                };
                this.queryWarningList(queryData);
              },
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
  },
  created() {
    let data = window.localStorage.getItem("treeData");
    data = JSON.parse(data);
    this.sensorList = data.treeData[0].sensorList;
    console.log(this.sensorList);

    let fun = async () => {
      await Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"type\\":\\"2\\"}","serviceCode":"querySelect","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.monitorList = res.data.parameter.list;
        let queryData = {
          currentPage: "1",
          sensorId: "",
          monitorId: "",
          statisticType: "00",
        };
        this.queryWarningList(queryData);
      });
    };
    fun();
  },
};
</script>